import React from 'react';
import { Modal } from 'antd';
import styles from './index.less';

type DataType = {
  title: string; // 弹窗标题
  onOk?: () => void; // 弹窗确定时触发的事件
  width?: number | string; // 弹窗宽度
  isOpen: boolean; // 弹窗显示隐藏状态
  setIsOpen: React.Dispatch<React.SetStateAction<boolean>>; // 修改弹窗显示隐藏状态
  children: any; // 弹窗内容
  footer?: any;
  cancelText?: any; // 取消按钮
};

function AdvancedModal(props: DataType) {
  const {
    title,
    onOk,
    width,
    isOpen,
    setIsOpen,
    children,
    footer,
    cancelText,
    ...other
  } = props;

  return (
    <Modal
      width={width || 420}
      title={title}
      open={isOpen}
      onOk={onOk}
      onCancel={() => {
        setIsOpen(false);
      }}
      footer={footer}
      {...other}
      destroyOnClose
      cancelText={cancelText}
    >
      {children}
    </Modal>
  );
}

export default AdvancedModal;
